<template>
  <div class="gva-search-box">
    <el-form
      ref="elSearchFormRef"
      :inline="true"
      class="demo-form-inline"
    >
      <el-form-item><el-text>时间：</el-text></el-form-item>
      <el-form-item>
        <el-button
          :type="selectDateType1"
          @click="changeData(date1)"
        >昨日</el-button>
        <el-button
          :type="selectDateType2"
          @click="changeData(date7)"
        >过去7天</el-button>
        <el-button
          :type="selectDateType3"
          @click="changeData(date30)"
        >过去30天</el-button>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="pickerValue"
          type="daterange"
          range-separator=" - "
          end-placeholder=""
          value-format="YYYY-MM-DD"
          :default-value="[new Date(), new Date()]"
          :disabled-date="disabledDate"
          @change="pickerChange"
          @calendar-change="handleChange"
          @focus="handleFocus"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

var selectDateType1 = ref('default')
var selectDateType2 = ref('primary')
var selectDateType3 = ref('default')
const date = new Date()
date.setDate(date.getDate() - 1)
const date1 = date.toISOString().split('T')[0]

date.setDate(date.getDate() - 6)
const date7 = date.toISOString().split('T')[0]
var pickerValue = ref([date7, date1])
date.setDate(date.getDate() - 29)
const date30 = date.toISOString().split('T')[0]
var returnValue = { start_date: date7, end_date: date1 }

const emit = defineEmits(['searchChange'])
// defineProps({
//   start_date: {
//     type: String,
//     default: null,
//   },
//   end_date: {
//     type: String,
//     default: '',
//   },
// })
function handleChange(val) {
  const [pointDay] = val
  pickDay.value = pointDay
}
const pickDay = ref(null)
const disabledDate = (time) => {
  if (!pickDay.value) {
    return false
  } else {
    const con1 =
          new Date(pickDay.value).getTime() - 1 * 24 * 60 * 60 * 1000
    const con2 =
          new Date(pickDay.value).getTime() + 30 * 24 * 60 * 60 * 1000
    return time < con1 || time > con2
  }
}

function handleFocus() {
  pickDay.value = null
}
var changeData = function(date) {
  pickerValue.value = [date, date1]
  returnValue = { start_date: date, end_date: date1 }
  changeType()
  emit('searchChange', returnValue)
}
var pickerChange = function() {
  returnValue = { start_date: pickerValue.value[0], end_date: pickerValue.value[1] }
  changeType()
  emit('searchChange', returnValue)
}

var changeType = function() {
  if (returnValue.start_date == date1 && returnValue.end_date == date1) {
    selectDateType1.value = 'primary'
    selectDateType2.value = selectDateType3.value = ''
  } else if (returnValue.start_date == date7 && returnValue.end_date == date1) {
    selectDateType2.value = 'primary'
    selectDateType1.value = selectDateType3.value = ''
  } else if (returnValue.start_date == date30 && returnValue.end_date == date1) {
    selectDateType3.value = 'primary'
    selectDateType1.value = selectDateType2.value = ''
  } else {
    selectDateType1.value = selectDateType2.value = selectDateType3.value = ''
  }
}
emit('searchChange', returnValue)
</script>
<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
/* 这里可以添加一些样式，如果需要的话 */
</style>
